<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习1：制作多彩照片墙</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.pics{
				margin:200px 20px 0px;
				position: relative;
			}
			img{
				background-color: white;
				padding: 10px;
			}
			img:nth-of-type(odd){
				width:300px;
			}
			img:nth-of-type(even){
				width:200px;
			}
			img:first-of-type{
				position: absolute;
				top:0px;
				left: 300px;
				transform: rotate(-15deg);
			}
			img:nth-of-type(2){
				position: absolute;
				top:-20px;
				left: 700px;
				transform: rotate(-20deg);
			}
			img:nth-of-type(3){
				position: absolute;
				top:-200px;
				left: 860px;
				transform: rotate(20deg);
			}
			img:nth-of-type(4){
				position: absolute;
				top:-170px;
				left: 400px;
				transform: rotate(-20deg);
			}img:nth-of-type(5){
				position: absolute;
				top:-170px;
				left: 80px;
				transform: rotate(-15deg);
			}
			img:nth-of-type(6){
				position: absolute;
				top:100px;
				left: 86px;
				transform: rotate(-30deg);
			}
			img:nth-of-type(7){
				position: absolute;
				top:100px;
				left: 686px;
				transform: rotate(15deg);
			}
			img:nth-of-type(8){
				position: absolute;
				top:-200px;
				left: 586px;
				transform: rotate(15deg);
			}
			img:nth-of-type(9){
				position: absolute;
				top:100px;
				left: 486px;
				transform: rotate(-15deg);
			}
			img:nth-of-type(10){
				position: absolute;
				top:200px;
				left: 186px;
				transform: rotate(-15deg);
			}
			img:hover{
				transition: all .6s ease-in-out;
				transform:scale(1.5) rotate(0deg);
				z-index: 1;
				box-shadow: white 4px 4px 4px; 			
				}
		</style>
	</head>
	<body>
		<div class="pics">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
			<img src="img/6.jpg" />
			<img src="img/7.jpg" />
			<img src="img/8.jpg" />
			<img src="img/9.jpg" />
			<img src="img/10.jpg" />
		</div>
	</body>
</html>
